<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百度一下，你就知道</title>
        <link href="附件/style.css" type="text/css" rel="stylesheet" />
        <script src="附件/index.js"></script>
    </head>
    <body>
        <div class="web-outer">
            <div id="head">
                <div id="top-left">
                    <a href="http://news.baidu.com/" target="_blank">新闻</a>
                    <a href="https://www.hao123.com" target="_blank">hao123</a>
                    <a href="http://map.baidu.com" target="_blank">地图</a>
                    <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
                    <a href="https://haokan.baidu.com/" target="_blank">视频</a>
                    <a href="http://image.baidu.com/" target="_blank">图片</a>
                    <a href="https://pan.baidu.com/" target="_blank">网盘</a>
                </div>
                <div id="top-right">
                    <div id="top-login-btn">登录</div>
                </div>
            </div>
            <div id="outer-mid">
                <div id="mid">
                    <div id="logo-outer">
                        <figure id="logo" title="点击一下，了解更多"></figure>
                    </div>
                    <div id="search-div">
                        <div id="search-input">
                            <input>
                            <div id="search-btn">百度一下</div>
                        </div>
                    </div>
                    <style>
                        #hot-title{
                            font-size: 24px;
                            color: blue;
                        }
                        #hot-title #hot-gameIcon{
                            height: 100%;
                        }
                        #hot-title .hot-more{
                            float: right;
                        }
                        #hot-title .hot-more .hot-more-word{
                            color: gray;
                            font-size: 14px;
                        }
                        #hot-title .hot-more .hot-more-icon{
                            height: 14px;
                        }
                        #hot li{
                            width: 100% !important;
                        }
                        #hot li .hot-score{
                            float: right;
                            
                        }
                        #hot li .hot-icon{
                            float: right;
                            height: 100%;
                        }
                        #hot li::after{
                            display: block;
                            clear: both;
                            content: "";
                        }

                    </style>
                    
                    <div id="hot-title">
                        <img src="img/game.png" id="hot-gameIcon">
                        <span>热榜之21182105分榜</span>
                        <div class="hot-more">
                            <span class="hot-more-word">更多</span>
                            <img src="img/right.png" class="hot-more-icon">
                        </div>
                    </div>
                    <ul id="hot">
                         
                        <!--
                        <li>
                            <span class="hot-order hot-order-1">1</span><span class="hot-content">沙伊两国在北京握手言和</span><span class="hot-tag hot">热</span>
                        </li>
                        <li>
                            <span class="hot-order">4</span><span class="hot-content">TES主教练暂离赛场</span>
                        </li>
                        -->
                        
                        <!-- TODO: 完成剩余部分的代码 -->
                        
                        <li>
                            <span class="hot-order hot-order-1">1</span><span class="hot-content">原神</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">324853</span>
                        </li>
                        <li>
                            <span class="hot-order hot-order-2">2</span><span class="hot-content">香肠派对</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">168931</span>
                        </li>
                        <li>
                            <span class="hot-order hot-order-3">3</span><span class="hot-content">王者荣耀</span>
                            <img src="img/heng.png" class="hot-icon"><span class="hot-score">161167</span>
                        </li>
                        <li>
                            <span class="hot-order">4</span><span class="hot-content">我的世界</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">127320</span>
                        </li>
                        <li>
                            <span class="hot-order">5</span><span class="hot-content">和平精英</span>
                            <img src="img/heng.png" class="hot-icon"><span class="hot-score">123379</span>
                        </li>
                        <li>
                            <span class="hot-order">6</span><span class="hot-content">植物大战僵尸</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">88496</span>
                        </li>
                        <li>
                            <span class="hot-order">7</span><span class="hot-content">迷你世界</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">79547</span>
                        </li>
                        <li>
                            <span class="hot-order">8</span><span class="hot-content">光遇</span>
                            <img src="img/heng.png" class="hot-icon"><span class="hot-score">76194</span>
                        </li>
                        <li>
                            <span class="hot-order">9</span><span class="hot-content">泰拉瑞亚</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">54000</span>
                        </li>
                        <li>
                            <span class="hot-order">10</span><span class="hot-content">绝地求生</span>
                            <img src="img/up.png" class="hot-icon"><span class="hot-score">49095</span>
                        </li>
                        <!-- end -->
                    </ul>
                </div>
            </div>
            <div id="footer">本网页仅用于软工实验使用</div>
            <!-- 引入核心代码，请不要修改 -->
            <script src="code/index.js"></script>
        </div>
        <style>
            #logo{
                background-image: url('./img/logo.png');
            }
        </style>
    </body>
</html>